<template>
  <k-view>
    <k-view class="title">
      <k-text class="content-title">风险指标</k-text>
      <score-radio-tabs
        v-if="auth === authOptions.professionAuth"
        :modelValue="activeRadioTab"
        @change="handleRadioChange"
        :radioTabList="radioTabList"
      ></score-radio-tabs>
    </k-view>
    <template v-if="tableDataList && tableDataList.length">
      <ScrollTable
        :tableHeader="tableHeader"
        :tableData="tableDataList"
        :foldList="foldList"
        :theme="theme"
        :hasAuth="hasAuth"
        @foldListS="foldListS"
        @handleDialog="handleDialog"
      />
      <sell-mask v-if="!hasAuth" @clickBuy="clickBuy" @hasClickBuy="hasClickBuy" :pageid="pageid" />
      <confirm-dialog
        v-if="showDialog"
        :title="dialogContent.title"
        :content="dialogContent.content"
        :confirm-text="dialogContent.confirmText"
        hide-cancel
        @success="dialogSuccess"
        @fail="dialogFail"
      ></confirm-dialog>
    </template>
    <RiskEmpty v-else />
  </k-view>
</template>

<script>
import ConfirmDialog from '@/components/Intro/ConfirmDialog.vue';
import ScoreRadioTabs from '@/components/StockDiagnosis/radioTabs.vue';
import RiskEmpty from '@/components/StockDiagnosis/riskEmpty.vue';
import SellMask from '@/components/StockDiagnosis/sellMask.vue';
import ScrollTable from '@/components/StockDiagnosis/ScrollTable.vue';
import FoldIcon from '../../assets/index/fold-icon.png';
import questionIcon from '@/assets/index/question_icon.png';
import questionIconDark from '@/assets/index/question_icon_dark.png';
import { sendClickStat } from '@/utils/stat';
import { getUrlSearch } from '@/utils/index';
import { PAGEID } from '@/config/stat';
import config from '@/config/index';
import fl from '@king-fisher/falcon';
const { authOptions } = config;

export default {
  props: {
    tableData: {
      type: Array,
      default: [],
    },
    auth: {
      type: Number,
      default: 0,
    },
    theme: {
      type: String,
      default: 'light',
    },
  },
  components: {
    ConfirmDialog,
    ScoreRadioTabs,
    SellMask,
    RiskEmpty,
    ScrollTable,
  },
  data() {
    return {
      authOptions: Object.freeze(authOptions),
      tableHeader: ['指标名称', '健康指数', '排名', '指标值'],
      showDialog: false,
      dialogContent: {
        title: '异常解读',
        content: '',
        confirmText: '知道了',
      },
      foldList: [],
      FoldIcon,
      questionIcon,
      questionIconDark,
      pageid: PAGEID.STOCK,
      activeRadioTab: 2,
      radioTabList: [
        {
          name: '全部指标',
          index: 1,
        },
        {
          name: '风险指标',
          index: 2,
        },
      ],
    };
  },
  methods: {
    // 全部指标和风险指标切换
    handleRadioChange(current) {
      sendClickStat(`${PAGEID.STOCK}.switch.click`);
      this.activeRadioTab = current;
    },
    formatData(num) {
      if (num && num === '1.0') {
        return '是';
      } else if (num && num === '0.0') {
        return '否';
      } else if (num) {
        const numFloat = parseFloat(num);
        const numFloatFixed = numFloat.toFixed(2);
        const suffix = num.includes('%') ? '%' : '';
        return numFloatFixed + suffix;
      } else {
        return num;
      }
    },
    dialogSuccess() {
      this.closeDialog();
    },
    dialogFail() {
      this.closeDialog();
    },
    handleDialog(item) {
      sendClickStat(`${PAGEID.STOCK}.problem.click`);
      this.dialogContent.content = item.words || '';
      this.showDialog = true;
    },
    closeDialog() {
      this.showDialog = false;
    },
    foldListS(itemF) {
      const resIndex = this.foldList.findIndex(item => item === itemF.name);
      if (resIndex === -1) {
        this.foldList.push(itemF.name);
      } else {
        //重复点击
        this.foldList.splice(resIndex, 1);
      }
    },
    judgeItemInfold(val) {
      const resIndex = this.foldList.findIndex(item => item.name === val.name);
      return resIndex === -1;
    },
    clickBuy() {
      fl.jumpNativePage({
        url: `client.html?action=ymtz^webid=2804^mode=new^url=${
          config.url.stockLoadPage
        }?paystockcode=SH${getUrlSearch('stockCode')}&paystockname=${getUrlSearch('stockName')}`,
      });
    },
    hasClickBuy() {
      this.$emit('hasClickBuy');
    },
  },

  mounted() {
    this.foldList.length = 0;
  },
  computed: {
    tableDataList() {
      const res = this.tableData.map(item => {
        const index3List =
          this.activeRadioTab === 1 ? item.index3_list : item.index3_list.filter(i => i.risk);
        return {
          riskNum: item.risk_num,
          name: item.name,
          index3_list: index3List,
        };
      });
      return this.activeRadioTab === 1 ? res : res.filter(item => item.riskNum);
    },
    hasAuth() {
      return [authOptions.basicAuth, authOptions.professionAuth].includes(this.auth);
    },
  },
};
</script>

<style lang="less">
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 26px;

  .content-title {
    font-size: 36px;
    color: #262626;
    font-weight: 500;
  }

  .stock-radio-tabs {
    margin: 0;
  }

  .stock-radio-tabs {
    margin-right: 20px;
  }
}

[theme-mode='black'] {
  .stock-diagnosis-table {
    .header-title {
      color: rgba(255, 255, 255, 0.6);
    }

    .body-cloumn-F {
      background-color: #212121;
    }

    .body-title-S {
      color: rgba(255, 255, 255, 0.6);
    }

    .body-cloumn-F .body-title-F {
      color: rgba(255, 255, 255, 0.84);
    }

    .risk-num {
      color: rgba(255, 255, 255, 0.84) !important;
    }
  }
}
</style>
